<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>打印设计 - {{title}}</title>
    <link href="{{root}}static/plugins/hiprint/css/hiprint.css" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/print-lock.css" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/print-lock.css" media="print" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/hiprint-style.css" rel="stylesheet">
<!--    <link href="{{root}}static/stylesheet/css.css?v=62ac4804bcbbd" rel="stylesheet">-->
    <script src="{{root}}static/javascript/jquery-1.11.2.min.js"></script>
    <script src="{{root}}static/javascript/lib.js"></script>
    <style>
    .hide {display: none;}
    .warn {padding: 8px;background-color: #f2f2f2;margin: 2px 0 0 0;}
    .dibian {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;background-color: #000;-moz-opacity: 0.3;opacity: .30;filter: alpha(opacity=30);}
    .win {width: 400px;height: 200px;position: fixed;top: 50%;left: 50%;margin: -100px 0 0 -200px;z-index: 2;background-color: #fff;border-top-left-radius: 4px;border-top-right-radius: 4px;}
    .winTitle {height: 40px;line-height: 40px;background-color: #d7d7d7;padding: 0 10px 0 10px;border-top-left-radius: 4px;border-top-right-radius: 4px;user-select: none;cursor: pointer;}
    .winClose {cursor: pointer;float: right;font-size: 24px;}
    .winClose:hover {color: #629afd;}
    .winAuto {overflow: auto;}
    #warnWord {font-size: 14px;line-height: 20px;text-align: center;display: table-cell;vertical-align: middle;width: 300px;height: 60px;padding: 10px;}
    #warnSure, #warnCancel {position: absolute;width: 150px;height: 40px;line-height: 40px;text-align: center;bottom: 0;cursor: pointer;color: #fff;}
    #warnSure {background-color: #ff7472;}
    #warnSure:hover {background-color: #e66765;}
    #warnCancel {background-color: #ccc;left: 150px;}
    #warnCancel:hover {background-color: #aaa;}
    .winFooter {background-color: #cecdbb;height: 40px;line-height: 40px;padding: 0 10px 0 10px;text-align: right;}
    .layerSearch {padding: 16px 10px 0 10px;}
    </style>
</head>
<body>
<div class="wrapper">
    <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
        <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
            <div class="container-fluid height-100-per print-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-md-2 " style="padding-right:0px;">
                                <div class="small-printElement-types hiprintEpContainer">
                                </div>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <div class="hiprint-toolbar" style="margin-top:15px;">
                                    <ul>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li>
                                        <li>
                                            <a class="hiprint-toolbar-item">自定义:
                                                <input type="text" id="customWidth" class="customWidth"
                                                       placeholder="宽/mm"/> x
                                                <input type="text" id="customHeight" class="customHeight"
                                                       placeholder="高/mm"/>
                                            </a>
                                            <a class="hiprint-toolbar-item"
                                               onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">确定</a>
                                        </li>
                                        <li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>
                                        <li><a class="btn hiprint-toolbar-item btn-diy" onclick="preview()">预览</a></li>
                                        <li>
                                            <a class="btn hiprint-toolbar-item btn-diy" onclick="directPrint()">打印</a>
                                        </li>
                                        <li>
                                            <a class="btn hiprint-toolbar-item btn-diy" onclick="save()">保存</a>
                                        </li>
                                    </ul>
                                </div>
                                <!--工作区-->
                                <div id="hiprint-printTemplate" class="hiprintPrintTemplate"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </content>
        <sider class="hinnn-layout-sider" style="">
            <div class="container height-100-per" style="width:250px;">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="PrintElementOptionSetting" style="margin-top:10px;"></div>
                    </div>
                </div>
            </div>
        </sider>
    </layout>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="display: inline-block; width: auto;">
        <div class="modal-content" id="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">设计预览</h4>
            </div>
            <div class="modal-body">
                <button type="button" class="btn btn-danger" onclick="printByHtml()">打印</button>
                <div class="prevViewDiv"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{{warn}}
<!-- hiprint 打印初始化，更多参数请查看文档 -->
<script src="{{root}}static/plugins/hiprint/js/bootstrap.min.js"></script>
<!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
<script src="{{root}}static/plugins/hiprint/js/polyfill.min.js"></script>
<script src="{{root}}static/plugins/hiprint/js/jquery.nicescroll.min.js"></script>
<script src="{{root}}static/plugins/hiprint/js/jquery.minicolors.min.js"></script>
<script src="{{root}}static/plugins/hiprint/js/hiprint.config.js"></script>
<!-- hiprint 核心js-->
<script src="{{root}}static/plugins/hiprint/js/hiprint.bundle.js"></script>
<!-- 条形码生成组件-->
<script src="{{root}}static/plugins/hiprint/js/JsBarcode.all.min.js"></script>
<!-- 二维码生成组件-->
<script src="{{root}}static/plugins/hiprint/js/qrcode.js"></script>
<!-- 调用浏览器打印窗口helper类，可自行替换-->
<script src="{{root}}static/plugins/hiprint/js/jquery.hiwprint.js"></script>
<script>
    let configElementTypeProvider = (function () {
        return function (options) {
            var addElementTypes = function (context) {
                context.addPrintElementTypes(
                    "leftModule",
                    [
                        new hiprint.PrintElementTypeGroup("常规", [
                            {tid: 'leftModule.text', text: '文本', data: '', type: 'text'},
                            {
                                tid: 'leftModule.image',
                                text: '图片',
                                data: '{{root}}img/svg/adloginIco.svg',
                                type: 'image',
                                "options": {
                                    "src": '{{root}}img/svg/adloginIco.svg'
                                }
                            },
                            {tid: 'leftModule.longText', text: '长文', data: '', type: 'longText'},
                            {
                                tid: 'leftModule.tableCustom',
                                title: '表格',
                                type: 'tableCustom'
                            },
                            {
                                tid: 'leftModule.html', title: 'html',
                                formatter: function (data, options) {
                                    return $('<div style="height:50pt;width:50pt;background:red;border-radius: 50%;"></div>');
                                },
                                type: 'html'
                            },
                        ]),
                        new hiprint.PrintElementTypeGroup("辅助", [
                            {
                                tid: 'leftModule.hline',
                                title: '横线',
                                type: 'hline'
                            },
                            {
                                tid: 'leftModule.vline',
                                title: '竖线',
                                type: 'vline'
                            },
                            {
                                tid: 'leftModule.rect',
                                title: '矩形',
                                type: 'rect'
                            },
                            {
                                tid: 'leftModule.oval',
                                title: '椭圆',
                                type: 'oval'
                            }
                        ]),
                        {{json}}
                ])
            };
            return {
                addElementTypes: addElementTypes
            };
        };
    })();
    let hiprintTemplate,
        printData = JSON.parse(`{{printData}}`),
        template = JSON.parse(`{{printJson}}`)
    // 打印框架表格高度 bug 修正
    if(template['panels'][0]['printElements'].length > 0){
        const length = template['panels'][0]['printElements'].length
        for (let i = 0; i < length; i++) {
            const array = template['panels'][0]['printElements'][i]
            if(array['options']['field'] === 'detail' || array['printElementType']['type'] === 'tableCustom'){
                template['panels'][0]['printElements'][i]['options']['height'] = (array['options']['height'] > 260) ? 260 : array['options']['height']
            }
        }
    }

    $(function () {
        //初始化打印插件
        hiprint.init({
            providers: [new configElementTypeProvider()]
        });
        //设置左侧拖拽事件
        hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'leftModule');
        hiprintTemplate = new hiprint.PrintTemplate({
            template: template,
            settingContainer: '#PrintElementOptionSetting',
            paginationContainer: '.hiprint-printPagination'
        });
        //打印设计
        hiprintTemplate.design('#hiprint-printTemplate');
    })
    //预览
    const preview = function () {
        $('#myModal .modal-body').html(hiprintTemplate.getHtml(printData))
        $('#myModal').modal('show')
    };
    // 设置纸张大小
    const setPaper = function (paperTypeOrWidth, height) {
        hiprintTemplate.setPaper(paperTypeOrWidth, height);
    }
    //旋转
    const rotatePaper = function () {
        hiprintTemplate.rotatePaper();
    }
    //清除
    const clearTemplate = function () {
        hiprintTemplate.clear();
    }
    // 保存
    const save = function () {
        const field = {
            id: '{{id}}',
            tplBody: JSON.stringify(hiprintTemplate.getJson()),
        }
        $.post('{{root}}control/adIndex.html?cla=printTemplate&fun=upbody', field, function (res) {
            if (res.warn === 2) {
                window.location.reload()
            } else {
                warn(res.warn)
            }
        }, 'json')
    }

    //打印
    const directPrint = function () {
        hiprintTemplate.print(printData);
    }

    //预览打印
    const printByHtml = function () {
        hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
    }
</script>
</body>
</html>
